<template>
	<view class="detail_content">
		<view class="top_nav">
			<view class="left" @click="back()">
				<image src="../../static/img/arrow-left.png" mode=""></image>
				<p>2020年7月</p>
			</view>
			<view class="right">90分</view>
		</view>
		<view class="footer">
			<!-- 基本信息 -->
			<view class="i_title">基本信息</view>
			<view class="base_info">
				<view class="i_item">
					<view class="item">
						<text class="t_title">考评类型</text>
						<text class="t_content">月度组织考评类型</text>
					</view>
					<view class="item">
						<text class="t_title">考评周期</text>
						<text class="t_content">2020.07.01 - 2020.07.31</text>
					</view>
					<view class="item">
						<text class="t_title">被考核部门</text>
						<text class="t_content">测试部门1</text>
					</view>
					<view class="item">
						<text class="t_title">组织绩效负责人</text>
						<text class="t_content">孙山</text>
					</view>
				</view>
			</view>
			<view>
				<uni-collapse style="position: relative;" ref="add" class="warp" @change="change">
					<view style="position: absolute;top: 35rpx;right: 100rpx;color: ;color: #959595;font-size: 26rpx;">19/20</view>
					<uni-collapse-item style="font-size: 34rpx !important;color: #101010;font-weight: 600;box-sizing: border-box;" show-animation :open="true" title="KPI指标">
						<view class="tem"  style="position: relative;">
							<view style="position: absolute;top: 32rpx;left: 270rpx;color: ;color: #959595;font-size: 26rpx;font-weight: normal;">1</view>
							<uni-collapse-item show-animation :open="true" title="序号">
								<view class="" style="font-size: 26rpx;font-weight: normal;background-color: #fff;">
									<view class="col_content">
										<view class="i_item">
											<view class="item">
												<text class="t_title">指标名称</text>
												<text class="t_content">指标名称指标名称指标名称指标名称指标名称指标名称指标名称指标名称指标名称指标名称</text>
											</view>
											<view class="item">
												<text class="t_title">指标定义</text>
												<text class="t_content">指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义</text>
											</view>
											<view class="item">
												<text class="t_title">考核标准</text>
												<text class="t_content">考核标准考核标准考核标准考核标准考核标准考核标准</text>
											</view>
											<view class="item">
												<text class="t_title">权重</text>
												<text class="t_content">10</text>
											</view>
											<view class="item">
												<text class="t_title">计划完成值</text>
												<text class="t_content">计划完成值计划完成值计划完成值计划完成值计划完成值</text>
											</view>
											<view class="item">
												<text class="t_title">实际完成值</text>
												<text class="t_content">实际完成值实际完成值实际完成值实际完成值实际完成值实际完成值</text>
											</view>
											<view class="item">
												<text class="t_title">完成率</text>
												<text class="t_content">98%</text>
											</view>
											<view class="item">
												<text class="t_title">汇报得分</text>
												<text class="t_content">10</text>
											</view>
											<view class="item">
												<text class="t_title">单项得分</text>
												<text class="t_content">9</text>
											</view>
											<view class="item">
												<text class="t_title">备注</text>
												<text class="t_content">备注备注备注备注备注备注备注备注备注备注备注</text>
											</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</view>
						<view class="tem" style="position: relative;">
							<view style="position: absolute;top: 32rpx;left: 270rpx;color: ;color: #959595;font-size: 26rpx;font-weight: normal;">2</view>
							<uni-collapse-item show-animation title="序号">
								<view class="" style="font-size: 26rpx;font-weight: normal;background-color: #fff;">
									<view class="col_content">
										<view class="i_item">
											<view class="item">
												<text class="t_title">指标名称</text>
												<text class="t_content">指标名称指标名称指标名称指标名称指标名称指标名称指标名称指标名称指标名称指标名称</text>
											</view>
											<view class="item">
												<text class="t_title">指标定义</text>
												<text class="t_content">指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义指标定义</text>
											</view>
											<view class="item">
												<text class="t_title">考核标准</text>
												<text class="t_content">考核标准考核标准考核标准考核标准考核标准考核标准</text>
											</view>
											<view class="item">
												<text class="t_title">权重</text>
												<text class="t_content">10</text>
											</view>
											<view class="item">
												<text class="t_title">计划完成值</text>
												<text class="t_content">计划完成值计划完成值计划完成值计划完成值计划完成值</text>
											</view>
											<view class="item">
												<text class="t_title">实际完成值</text>
												<text class="t_content">实际完成值实际完成值实际完成值实际完成值实际完成值实际完成值</text>
											</view>
											<view class="item">
												<text class="t_title">完成率</text>
												<text class="t_content">98%</text>
											</view>
											<view class="item">
												<text class="t_title">汇报得分</text>
												<text class="t_content">10</text>
											</view>
											<view class="item">
												<text class="t_title">单项得分</text>
												<text class="t_content">9</text>
											</view>
											<view class="item">
												<text class="t_title">备注</text>
												<text class="t_content">备注备注备注备注备注备注备注备注备注备注备注</text>
											</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
</template>

<script>
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniSection from '@/components/uni-section/uni-section.vue';
export default {
	components: {
		uniSection,
		uniCollapse,
		uniCollapseItem,
		uniListItem
	},
	data() {
		return {
			list: [
				{
					title: '标题文字'
				}
			]
		};
	},
	methods: {
		back() {
			uni.navigateBack({ delta: 1 });
		},
		change(e) {}
	}
};
</script>

<style lang="less">
// 去除折叠面板右侧箭头
/* /deep/.uni-collapse-cell__title-arrow[data-v-181a1784] {
		display: none;
	} */
// 折叠面板内边距
/deep/.uni-collapse-cell__title[data-v-328030a2] {
	padding: 24rpx 44rpx;
}
// 折叠面板收起时的背景色
/deep/ .uni-collapse-cell--hide[data-v-328030a2] {
	background-color: #eee;
}
// 折叠面板打开时的背景色
/deep/ .uni-collapse-cell--open[data-v-328030a2] {
	background-color: #eee;
}
// 第二层折叠面板
.tem {
	/deep/ .uni-collapse-cell__title-text {
		font-size: 26rpx;
		font-weight: normal;
	}
	// 折叠面板收起时的背景色
	/deep/ .uni-collapse-cell--hide[data-v-328030a2] {
		background-color: #fff;
	}
	// 折叠面板打开时的背景色
	/deep/ .uni-collapse-cell--open[data-v-328030a2] {
		background-color: #fff;
	}
	.uni-collapse-cell[data-v-328030a2] {
		border: 0 none;
	}
}

.i_title {
	font-size: 30rpx;
	color: #101010;
	font-weight: 600;
	padding: 30rpx 50rpx;
	box-sizing: border-box;
}
.detail_content {
	width: 100%;
	height: 100%;
	.top_nav {
		width: 100%;
		height: 100rpx;
		background-color: #007aff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			image {
				width: 58rpx;
				height: 58rpx;
			}
			p {
				color: #fff;
				font-size: 32rpx;
				margin: 7rpx 0 0 10rpx;
			}
		}
		.right {
			color: #fff;
			font-size: 32rpx;
			margin: 10rpx 15rpx 0 0;
		}
	}
	.footer {
		width: 100%;
		box-sizing: border-box;
		background-color: #eee;
		.base_info {
			.i_item {
				width: 100%;
				background-color: #fff;
				padding: 20rpx 50rpx;
				box-sizing: border-box;
				text {
					font-size: 26rpx;
				}
				.item {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					line-height: 2.2;
					.t_title {
						width: 35%;
						color: #101010;
					}
					.t_content {
						flex: 1;
						color: #959595;
					}
				}
			}
		}
		.col_content {
			margin-top: -10rpx;
			.i_item {
				width: 100%;
				padding: 0rpx 40rpx;
				box-sizing: border-box;
				text {
					font-size: 26rpx;
				}
				.item {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					line-height: 2.2;
					.t_title {
						width: 35%;
						color: #101010;
					}
					.t_content {
						flex: 1;
						color: #959595;
					}
				}
			}
		}
	}
}
</style>
